<template>
  <div class="flex flex-col h-full" style="background-color: #ffffff; box-sizing: border-box;">

    <div :class="{'watermark':true, 'hideWater': visibleDetail}" id="watermark">
    </div>

      <zbFilter ref="zbFilterRef"/>

      <div class="flex justify-between mb-2 z-header" style="padding:.5em 0 .5em 1em; box-sizing: border-box;">
        <div style="display: flex;" class="items-center">
          <div :class="{ 'h-header-btn': true, 'active': item.pageName == currentPageName } " 
            v-for="(item, index) in userPageList" :key="item.stockCode" 
            :style="{'display': index<(getUserPageShowNum())?'block':'none'}">
            <div style="display: flex;" v-if="index<getUserPageShowNum()">
              <svg v-if="index == 0" style="display: flex;margin-top:3px;" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#333333" version="1.1" width="16" height="16"
                viewBox="0 0 16 16">
                <defs>
                  <clipPath id="master_svg0_sa782_01134">
                    <rect x="0" y="0" width="16" height="16" rx="0" />
                  </clipPath>
                </defs>
                <g clip-path="url(#master_svg0_sa782_01134)">
                  <g>
                    <path
                      d="M5.33333,3.33331298828125L7.33333,3.33331298828125L7.33333,9.33331298828125L5.33333,9.33331298828125L5.33333,11.33331298828125L4,11.33331298828125L4,9.33331298828125L2,9.33331298828125L2,3.33331298828125L4,3.33331298828125L4,1.33331298828125L5.33333,1.33331298828125L5.33333,3.33331298828125ZM12,6.66664298828125L14,6.66664298828125L14,12.66661298828125L12,12.66661298828125L12,14.66661298828125L10.66667,14.66661298828125L10.66667,12.66661298828125L8.66667,12.66661298828125L8.66667,6.66664298828125L10.66667,6.66664298828125L10.66667,4.66664298828125L12,4.66664298828125L12,6.66664298828125Z"
                      fill-opacity="1" />
                  </g>
                </g>
              </svg>

              <svg v-if="index==1" style="display: flex;margin-top:3px;" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#333333" version="1.1" width="16" height="16"
                viewBox="0 0 16 16">
                <defs>
                  <clipPath id="master_svg0_sa782_01124">
                    <rect x="0" y="0" width="16" height="16" rx="0" />
                  </clipPath>
                </defs>
                <g clip-path="url(#master_svg0_sa782_01124)">
                  <g>
                    <path
                      d="M2.5979219531249997,11.90661298828125L5.204591953125,9.29998298828125L7.090591953125,11.18531298828125L10.137921953125,8.13864298828125L11.333251953125,9.33331298828125L11.333251953125,5.99998298828125L7.999921953125,5.99998298828125L9.195261953125,7.19531298828125L7.090591953125,9.29998298828125L5.2052619531249995,7.41398298828125L1.907923953125,10.71131298828125C1.527875953125,9.85799298828125,1.332060023125,8.93411298828125,1.333257754645,7.99998298828125C1.333257754645,4.3179829882812495,4.3179219531249995,1.33331298828125,7.999921953125,1.33331298828125C11.681951953125,1.33331298828125,14.666551953125,4.3179829882812495,14.666551953125,7.99998298828125C14.666551953125,11.68201298828125,11.681951953125,14.66661298828125,7.999921953125,14.66661298828125C5.860391953125,14.66801298828125,3.850541953125,13.64121298828125,2.5979219531249997,11.90661298828125Z"
                      fill-opacity="1" />
                  </g>
                </g>
              </svg>
              <span class="cursor-pointer" v-if="!item.edit" style="display: flex;" @click="switchTab(item)">&nbsp;&nbsp;{{ item.pageName }}</span>
              <span v-if="item.edit"><a-input style="width:100px;" v-model:value="item.pageName" @blur="{item.edit=false;}" @pressEnter="async (value)=> {
                  if(!value.target.value) {
                    message.error('请输入名称');
                    return;
                  }
                  let result = await updateUserPageName({},{
                    id: item.id,
                    pageName: value.target.value
                  });
                  if(result) {
                    message.error(result);
                    return;
                  }
                  message.info('修改成功')
                  item.edit = false;
                  item.pageName = value.target.value;
              }"></a-input></span>
               <div class="ml-2" v-if="item.isSystem==0 && !item.edit">
                  <a-dropdown>
                    <a class="ant-dropdown-link" @click.prevent>
                      <FormOutlined />
                    </a>
                    <template #overlay>
                      <a-menu >
                        <a-menu-item key="2" @click="{item.edit=true;}">
                          <EditOutlined/>&nbsp;重命名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </a-menu-item>
                        <a-menu-item key="1" @click="onPageClick(1,item)">
                          <Popconfirm
                            title="确认要删除该分组吗?" 
                            ok-text="删除" 
                            cancel-text="取消"
                            placement="left" 
                            @confirm="deleteUserPageEvent(item)">
                            <DeleteOutlined/>&nbsp;删除分组&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          </Popconfirm>
                        </a-menu-item>

                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
            </div>
          </div>

          <a-dropdown v-if="userPageList.length>getUserPageShowNum()">
            <a class="ant-dropdown-link" @click.prevent>
              &nbsp;&nbsp;
              <CaretDownOutlined/>
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item v-for="(item, index) in userPageList.slice(getUserPageShowNum())">
                  <a href="javascript:;" style="padding: 0 1.5em 0 0" @click="resortUserPage(index)">
                    <FolderOutlined/>&nbsp;{{ item.pageName }}
                  </a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>

          <span style="display: inline-block; height: 24px; margin-left:.5em; margin-top:1px;width:1px;
            background-color: #e0e0e0;font-size: 24px;"></span>
          <button class="h-header-btn" @click="showAddUsePageModal"><plus-square-outlined />&nbsp;&nbsp;新建分组</button>
        </div>

        <div style="margin-left: auto;" class="h-full flex items-center">
           <button :class="{ 'right-set-btn': true }"  v-if="selectedRowKeys.length > 0" 
              style="position: relative;">
            <div style="display: flex;flex-direction: row;">
              <svg style="display: flex;margin-top:3px;" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#212123" version="1.1" width="16" height="16"
                viewBox="0 0 16 16">
                <defs>
                  <clipPath id="master_svg0_789_07293/sa782_01703">
                    <rect x="0" y="0" width="16" height="16" rx="0" />
                  </clipPath>
                </defs>
                <g clip-path="url(#master_svg0_789_07293/sa782_01703)">
                  <g>
                    <path
                      d="M14.666551953125,8.75067C13.135851953125,7.65037,11.044711953125,7.76815,9.647251953125,9.03337C8.249781953125,10.2986,7.925371953125,12.3678,8.868581953125,14L1.999918953125,14C1.631728953125,14,1.333251953125,13.7015,1.333251953125,13.3333L1.333251953125,2.666667C1.333251953125,2.298477,1.631728953125,2,1.999918953125,2L6.942581953125,2L8.275921953125,3.33333L13.999951953125,3.33333C14.368151953125,3.33333,14.666551953125,3.6318099999999998,14.666551953125,4L14.666551953125,8.75067Z"
                      fill-opacity="1" />
                  </g>
                  <g transform="matrix(0,-1,1,0,-5,24.3330078125)">
                    <path
                      d="M9.66650390625,18.33317390625L11.66650390625,18.33317390625L11.66650390625,20.66650390625L14.99983390625,17.66650390625L11.66650390625,14.66650390625L11.66650390625,16.99983390625L9.66650390625,16.99983390625L9.66650390625,18.33317390625Z"
                      fill-opacity="1" />
                  </g>
                </g>
              </svg>
              <span style="display: flex;margin-left:5px;">
                <a-dropdown >
                  <a class="ant-dropdown-link" @click.prevent>
                    <span class="export-label">导出</span><CaretDownOutlined class="more-export-formatter"/>
                  </a>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item >
                        <a href="javascript:;" style="padding: 0 1.5em 0 0" @click="exportStocksClick('txt')">
                          1：txt格式
                        </a>
                      </a-menu-item>
                      <a-menu-item >
                        <a href="javascript:;" style="padding: 0 1.5em 0 0" @click="exportStocksClick('ebk')">
                          2：ebk格式
                        </a>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </span>
            </div>
        
          </button>
          

          <Popconfirm title="确认要从从自选股中删除吗?" ok-text="删除" cancel-text="取消"
            placement="left" @confirm="deleteStock2SelfPage" v-if="selectedRowKeys.length > 0">
            <button :class="{ 'right-set-btn': true }">
              <div style="display: flex;flex-direction: row;">
                <svg style="display: flex;margin-top:3px;" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink" fill="#212123" version="1.1" width="16" height="16"
                  viewBox="0 0 16 16">
                  <defs>
                    <clipPath id="master_svg0_789_07293/sa782_06471">
                      <rect x="0" y="0" width="16" height="16" rx="0" />
                    </clipPath>
                  </defs>
                  <g clip-path="url(#master_svg0_789_07293/sa782_06471)">
                    <g>
                      <path
                        d="M2.66682609375,5.333251953125L13.33349609375,5.333251953125L13.33349609375,13.999951953125C13.33349609375,14.368151953125,13.03499609375,14.666551953125,12.66679609375,14.666551953125L3.33349609375,14.666551953125C2.9653060937499998,14.666551953125,2.66682609375,14.368151953125,2.66682609375,13.999951953125L2.66682609375,5.333251953125ZM4.66682609375,3.333251953125L4.66682609375,1.999918953125C4.66682609375,1.631728953125,4.96530609375,1.333251953125,5.33349609375,1.333251953125L10.66682609375,1.333251953125C11.03501609375,1.333251953125,11.33349609375,1.631728953125,11.33349609375,1.999918953125L11.33349609375,3.333251953125L14.66679609375,3.333251953125L14.66679609375,4.666581953125L1.33349609375,4.666581953125L1.33349609375,3.333251953125L4.66682609375,3.333251953125ZM6.00016609375,2.666581953125L6.00016609375,3.333251953125L10.00016609375,3.333251953125L10.00016609375,2.666581953125L6.00016609375,2.666581953125ZM6.00016609375,7.999921953125L6.00016609375,11.999951953125L7.33349609375,11.999951953125L7.33349609375,7.999921953125L6.00016609375,7.999921953125ZM8.66682609375,7.999921953125L8.66682609375,11.999951953125L10.00016609375,11.999951953125L10.00016609375,7.999921953125L8.66682609375,7.999921953125Z"
                        fill-opacity="1" />
                    </g>
                  </g>
                </svg>
                <span style="display: flex;margin-left:3px;">删除</span>
              </div>
            </button>
          </Popconfirm>
          
          <button type="default" class="right-set-btn stock-list-btn">
            <div style="display: flex;flex-direction: row;">
              <svg style="display: flex;margin-top:3px;" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#212123" version="1.1" width="16" height="16"
                viewBox="0 0 16 16">
                <defs>
                  <clipPath id="master_svg0_789_07293/sa782_01412">
                    <rect x="0" y="0" width="16" height="16" rx="0" />
                  </clipPath>
                </defs>
                <g clip-path="url(#master_svg0_789_07293/sa782_01412)">
                  <g>
                    <path
                      d="M5.33333,2.66664598828125L14,2.66664598828125L14,3.99998298828125L5.33333,3.99998298828125L5.33333,2.66664598828125ZM3,4.33331298828125C2.447715,4.33331298828125,2,3.88559298828125,2,3.33331298828125C2,2.78102798828125,2.447715,2.33331314722725,3,2.33331298828125C3.55228,2.33331314722725,4,2.78102798828125,4,3.33331298828125C4,3.88559298828125,3.55228,4.33331298828125,3,4.33331298828125ZM3,8.99998298828125C2.447715,8.99998298828125,2,8.55226298828125,2,7.99998298828125C2,7.44769298828125,2.447715,6.99998298828125,3,6.99998298828125C3.55228,6.99998298828125,4,7.44769298828125,4,7.99998298828125C4,8.55226298828125,3.55228,8.99998298828125,3,8.99998298828125ZM3,13.60001298828125C2.447715,13.60001298828125,2,13.15231298828125,2,12.60001298828125C2,12.04769298828125,2.447715,11.59998298828125,3,11.59998298828125C3.55228,11.59998298828125,4,12.04769298828125,4,12.60001298828125C4,13.15231298828125,3.55228,13.60001298828125,3,13.60001298828125ZM5.33333,7.33331298828125L14,7.33331298828125L14,8.66664298828125L5.33333,8.66664298828125L5.33333,7.33331298828125ZM5.33333,11.99998298828125L14,11.99998298828125L14,13.33331298828125L5.33333,13.33331298828125L5.33333,11.99998298828125Z"
                      fill-opacity="1" />
                  </g>
                </g>
              </svg>
              <span style="display: flex;margin-left:3px;">股票列表</span>
            </div>
          </button>
          <button type="default" class="right-set-btn" @click="showZbFilterModal">
            <div style="display: flex;flex-direction: row;">
              <svg style="display: flex;margin-top:3px;" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" fill="#212123" version="1.1" width="16" height="16"
                viewBox="0 0 16 16">
                <defs>
                  <clipPath id="master_svg0_789_07293/sa782_01451">
                    <rect x="0" y="0" width="16" height="16" rx="0" />
                  </clipPath>
                </defs>
                <g clip-path="url(#master_svg0_789_07293/sa782_01451)">
                  <g>
                    <path
                      d="M11.666748046875,1.64935302734375L15.333448046875,8.000023027343751L11.666748046875,14.35065302734375L4.333418046875,14.35065302734375L0.666748046875,8.000023027343751L4.333418046875,1.64935302734375L11.666748046875,1.64935302734375ZM5.756078046875,5.4466830273437505L9.089418046875,11.22002302734375L10.244078046875,10.55335302734375L6.910748046875,4.78002302734375L5.756078046875,5.4466830273437505Z"
                      fill-opacity="1" />
                  </g>
                </g>
              </svg>
              <span style="display: flex;margin-left:3px;" >指标配置</span>
            </div>
          </button>

          <a-input class="searchStockCode"
              v-model:value="searchStockCode"
              size="large"
              @pressEnter="onSearch"
            placeholder="搜索股票代码/名称/拼音关键字" >
            <template #prefix>
              <search-outlined />
            </template>
          </a-input>
        </div>
      </div>
      <div class="flex" style="flex-direction: row;height: 100%;width:100%;">
        <div style="display: flex;flex:1; min-width: 0;width:100%;border-right: 1px solid #e5e5e5;"
        class="bg-white">
          <s-table ref="mytableref" :columns="columns" row-key="stockCode"
            :showSorterTooltip ='false'
            :row-height="75"
            :columnDrag="true"
            :data-source="data" 
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth:28 }" 
            :pagination="false"
            @columnDragEnd="columnDragEndEvent"
            :scroll="{ x: scroll_x, y: scroll_y }" 
            :loading="listLoading"
            @change="stockTableChange">
            <template #headerCell="{ column }">
              <template v-if="column.key === 'config'">
                <span @click="showcolconfig" class="cursor-pointer">
                  <SettingOutlined />
                </span>
              </template>
            </template>

            <template #bodyCell="item">
              <template v-if="item?.column.key === 'stock_name'">
                <div class="flex flex-row">
                  <div class="flex" style="margin-right: 12px;">
                    <a-avatar :src="item.record.logo" />
                  </div>
                  <div class="flex flex-col justify-center cursor-pointer" @click="opendetail(item.record)">
                    <span style="color:#025FFF;text-align: left;font-family: Source Han Sans;font-feature-settings: 'kern'">
                      <div class="flex" style="flex-direction: row;">
                        <span class="flex" style="font-size: .9em;">{{ item.record.stockName }}</span>
                        <svg class="flex" v-if="item.record.bullSnort==1 && !visibleDetail" style="margin-left:5px;margin-top:4px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="11.904521942138672" height="13.03075122833252" viewBox="0 0 11.904521942138672 13.03075122833252"><g><path d="M9.39067,6.52575C9.213,7.22946,8.76067,7.93394,8.5124,8.46385C8.27964,8.96041,8.07714,9.77894,8.39447,10.2677Q8.87007,11.0009,8.37119,11.6387C8.0143,12.0949,7.44637,12.2508,7.13835,12.7877C7.10806,12.8403,7.05797,12.8784,6.99947,12.8933Q5.87835,13.178,4.76421,12.8731C4.73374,12.8649,4.70947,12.8415,4.69981,12.811Q4.49033,12.1476,3.79283,12.0708C3.74791,12.0659,3.70707,12.0423,3.68033,12.0057C3.36223,11.5689,3.06507,10.7557,3.44059,10.2631Q3.49257,10.194,3.54378,10.1258Q3.56783,10.0939,3.56783,10.0544C3.55231,8.93015,3.18455,7.72756,2.45524,6.8617Q2.33654,6.71972,2.43662,6.61653Q2.60731,6.44041,2.373,6.51256C1.58783,6.75385,0.589294,6.60101,0.016708,5.95549C-0.0152829,5.9192,0.000767741,5.862,0.0469666,5.84765L1.35274,5.45816C1.38836,5.44783,1.40152,5.40424,1.37757,5.37592C0.663001,4.51316,-0.126827,3.85368,0.0407595,2.60066Q0.0717941,2.36946,0.264208,2.10334C1.16498,0.859629,2.72447,0.394887,4.12412,0.00773187Q4.17067,-0.00545765,4.20481,0.00385261C4.21493,0.00648939,4.22264,0.0147031,4.22463,0.0249705C4.22661,0.0352376,4.22253,0.0457339,4.21412,0.0519563Q3.63067,0.499629,3.02162,0.903853C2.47852,1.2654,1.76085,1.82325,1.66231,2.48894C1.51723,3.47118,2.65154,3.8467,3.37154,4.04377C3.40911,4.05382,3.44897,4.05024,3.48404,4.03368Q3.96352,3.8048,4.51205,3.75204C5.62619,3.64575,6.89085,3.70782,7.90645,3.78851C8.04843,3.80015,8.15007,3.99566,8.23076,4.09808Q8.25481,4.12834,8.2905,4.11592C8.93757,3.89325,9.95318,3.65351,10.1502,2.9723C10.3613,2.24144,9.71576,1.57575,9.19361,1.18394Q8.49766,0.663336,7.7249,0.141956C7.71114,0.132383,7.70385,0.115958,7.70597,0.0993319C7.70808,0.0827065,7.71927,0.0686361,7.73498,0.0628183Q7.76136,0.0535077,7.80016,0.0729043Q7.83662,0.0907494,7.85912,0.0954044C9.26576,0.417387,11.8114,1.1529,11.8509,3.00256C11.8703,3.92661,11.0782,4.82273,10.3822,5.3348C10.3717,5.34244,10.3661,5.35521,10.3678,5.36813C10.3694,5.38105,10.3779,5.39206,10.39,5.39687Q11.1108,5.68704,11.8688,5.85618C11.8854,5.85991,11.8986,5.87257,11.903,5.88902C11.9074,5.90548,11.9023,5.92302,11.8897,5.93454Q10.8431,6.91058,9.43723,6.49937Q9.39999,6.48851,9.39067,6.52575Z" fill="#ED2A2A" fill-opacity="1"/></g></svg>
                        <span class="flex" v-if="item.record.hotStock==1 && !visibleDetail">🔥</span>
                        
                      </div>
                    </span>
                    <span style="font-size: .9em;text-align: left;">{{ item.record.stockCode }}</span>
                    <span class="score" :style="{'width':getScoreLineWidth(item.record.score*100), 'padding-right': getScorePaddingRIght(item.record.score*100)}" v-if="item.record.score && !visibleDetail">{{ item.record.score*100 }}</span>
                  
                  </div>
                </div>
              </template>

              <template v-if="item?.column.type === '5'">
                <div v-if="!visibleDetail">
                  <span v-if="item.record[item.column.dataIndex] > 0" class="rate-zb-block stock-rate-zb-red">
                    <span v-if="item.column.key!='turnover_rate'">+</span>{{ item.record[item.column.dataIndex] }}%</span>
                  <span v-else class="rate-zb-block stock-rate-zb-green">
                    {{ item.record[item.column.dataIndex] }}%</span>
                </div>
                <div v-else>
                  <span v-if="item.record[item.column.dataIndex] > 0" class="stock-text-red">
                    <span v-if="item.column.key!='turnover_rate'">+</span>{{ item.record[item.column.dataIndex] }}%</span>
                  <span v-else class="stock-text-green">
                    {{ item.record[item.column.dataIndex] }}%</span>
                </div>
              </template>

              <template v-if="item?.column.key === 'close'">
              <div v-if="item.record.riseAndFall > 0" class=" flex justify-center m-1 stock-text-red rounded ">
                {{ item.record.close }}</div>
              <div v-else class="flex justify-center m-1 stock-text-green rounded ">
                {{ item.record.close }}</div>
            </template>

              <template v-if="item.column.type === '6'">
                {{ !item.record[item.column.dataIndex]?'':item.record[item.column.dataIndex].toFixed(0) }}
                <RenderChartItem :dataArr="item.record[item.column.dataIndex + 'Arr']" />
              </template>

              <template v-if="item?.column.key === 'turnover'">
                {{ (item.record.turnover / 100000000).toFixed(2) }}亿
              </template>

              <template v-if="item.column.type === '7'">
                <div style="display: flex;flex-direction: row;margin-left: 1em;">
                  <RenderCandleItem :open="item.record[item.column.dataIndex + 'Open']"
                    :close="item.record[item.column.dataIndex + 'Close']"
                    :high="item.record[item.column.dataIndex + 'High']"
                    :low="item.record[item.column.dataIndex + 'Low']" />
                  <div style="margin-left: .5em;">{{ item.record[item.column.dataIndex] }}%</div>
                </div>
              </template>

              <template v-if="item?.column.key === 'config'">
                <span></span>
              </template>
            </template>
          </s-table>
        </div>

        <div class="flex flex-row bg-white" style="flex:3;min-width: 0;height: 100%;border-right: 1px solid #f1f1f1;" v-if="visibleDetail" ref="screenShot">

           <div class="flex flow-col" style="flex-direction: column;flex:6; min-width: 0;">

              <div class="flex" style="height: 100%;">
                <chartView ref="chartViewRef" :stock="currentStockData" @openStockDrawer="openDrawer"
                    @settingChange="onSettingChange" @indicatorChange="onIndicatorChange"
                    :widthRate="0.67"
                    @hideStockPane = "hideStockPane"
                    @deleteStock2SelfPage="deleteStock2SelfPage"
                    @screenShot="screenShotEvent"
                    :mainIndicators="selectedMainIndicator" :subIndicators="selectedSubIndicator"
                    :settingItems="settingItems" /> 
              </div>
            </div>

        <div v-if="drawerVisbile" class="flex flex-col bg-white right_stock_info_ban" 
          style="flex: 2.8;min-width: 0;flex-direction: column;">
          <div class="flex" style="padding:.5em 0 .5em .8em; font-weight: 500;font-size: 1.2em;">个股数据</div>
          <div :style="rightStockInfoStyle" class="flex">

            <div class="flex stock-info-bank stock-base-info" 
              style="background-color: #f1f1f1;margin:1em;padding:.5em;border-radius: .3em;margin-top: 0;
                flex-direction: column;flex:2">
              <div class="flex" style="padding: .2em 0 .2em .5em">公司基本信息</div>
              <div class="flex flex-col" style="background-color: #fff;padding:.5em; border-radius: .5em; margin:.3em">
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">交易所</span>
                  <span class="stock-info-bank-value">{{ currentStockData.exchange==2?'深圳证券交易所': currentStockData.exchange==1?'上海证券交易所':currentStockData.exchange==3?'北京证券交易所':'--'}}</span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">营业收入</span>
                  <span class="stock-info-bank-value">{{ currentStockData.totalOperatingRevenueFirst?(currentStockData.totalOperatingRevenueFirst/100000000).toFixed(2)+'亿':'--' }}</span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">净利润</span>
                  <span class="stock-info-bank-value">{{ currentStockData.netProfitFirst?(currentStockData.netProfitFirst / 100000000).toFixed(2)+'亿':'--' }}</span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">净利润增长率</span>
                  <span class="stock-info-bank-value">{{ currentStockData.netProfitYoyGrowthRateFirst }}%</span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">净资产收益率</span>
                  <span class="stock-info-bank-value">{{ currentStockData.returnOnEquityFirst }}%</span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">动态市盈率(PE)</span>
                  <span class="stock-info-bank-value">{{ currentStockData.PE }}</span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">市值</span>
                  <span class="stock-info-bank-value">{{ getSZ(currentStockData.FMC) }}&nbsp;/&nbsp;{{ getSZ(currentStockData.TMC) }}</span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">行业</span>
                  <span class="stock-info-bank-value">{{ currentStockData.industry }}</span>
                </div>
              </div>
            </div>
  
            <div class="flex stock-info-bank flex-col"
              style="background-color: #f1f1f1;margin:1em;padding:.5em;margin-top: 0;border-radius: .3em;flex:1">
              <div class="flex" style="padding: .2em 0 .2em .5em">动量评级</div>
              <div class="flex flex-col" style="background-color: #fff;padding:.5em; border-radius: .5em; margin:.3em">
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">个股是否走强</span>
                  <span class="stock-info-bank-value">
                    <check-outlined v-if="currentStockData.stockUpTrend=='是'" style="color:green" />
                    <close-outlined v-else style="color:red" />
                  </span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">个股是否强势</span>
                  <span class="stock-info-bank-value">
                    <check-outlined v-if="currentStockData.stockStrongTrend=='是'" style="color:green" />
                    <close-outlined v-else style="color:red" />
                  </span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">板块是否走强</span>
                  <span class="stock-info-bank-value">
                    <check-outlined v-if="currentStockData.sectorUpTrend=='是'" style="color:green" />
                    <close-outlined v-else style="color:red" />
                  </span>
                </div>
                <div class="stock-info-bank-item">
                  <span class="stock-info-bank-label">板块是否强势</span>
                  <span class="stock-info-bank-value">
                    <check-outlined v-if="currentStockData.sectorStrongTrend=='是'" style="color:green" />
                    <close-outlined v-else style="color:red" />
                  </span>
                </div>
              </div>
            </div>
  
            <div class="flex stock-info-bank flex-col"
              style="background-color: #f1f1f1;margin:1em;padding:.5em;margin-top: 0;border-radius: .3em;flex:2;
              height:100%;overflow-y: scroll;margin-bottom: 0;">
              <div class="flex" style="padding: .2em 0 .2em .5em">{{currentStockData.maxSectorRsName}}(RS {{ !currentStockData.maxSectorRs?'--':currentStockData.maxSectorRs.toFixed(0) }})</div>
              <div class="flex recommend-pane flex-col" 
                style="background-color: #fff;padding:.6em; border-radius: .5em; margin:.3em;overflow-y: scroll;">
                <div class="flex stock-info-bank-item" style="justify-content: center;
                  align-items: center;padding:.5em 0;color: #000; flex-direction: row;">
                  <span class="stock-info-ai-value" style="flex:1.2">&nbsp;&nbsp;股票名</span>
                  <span class="stock-info-ai-value" style="flex:1.2">&nbsp;&nbsp;&nbsp;涨跌幅</span>
                  <span class="stock-info-ai-value" style="flex:0.8">&nbsp;&nbsp;RS</span>
                  <span class="stock-info-ai-value" style="flex:0.8">强势</span>
                </div>
                <div class="flex stock-info-bank-item" style="justify-content: center;align-items: center;flex-direction: row;"
                  v-for="item in aiRecommendStockList" :key="item.stockCode">
                  <span class="stock-info-ai-value" style="color: #025FFF;cursor: pointer; flex:1.2"
                    @click="viewAiStock(item.stockCode)">{{ item.stockName }}</span>
                  <span class="stock-info-ai-value" style="flex:1.2">
                    <span v-if="item.riseAndFall > 0" class="stock-text-red">&nbsp;&nbsp;&nbsp;{{ item.riseAndFall }}%</span>
                    <span v-else class="stock-text-green">&nbsp;&nbsp;&nbsp;{{ item.riseAndFall }}%</span>
                  </span>
                  <span class="stock-info-ai-value" style="flex:0.8">&nbsp;&nbsp;&nbsp;{{ !item.stockWeighted252dRS?'--':item.stockWeighted252dRS.toFixed(0) }}</span>
                  <span class="stock-info-ai-value" style="flex:0.8">
                    <span v-if="item.stockStrongTrend">&nbsp;&nbsp;&nbsp;是</span>
                    <span v-else>&nbsp;&nbsp;&nbsp;否</span>
                  </span>
                </div>
              </div>
            </div>
            
          </div>

        </div>

        </div>

      </div>

    <!-- </div> -->
    <a-drawer placement="right" width="25%" :closable="false" :maskClosable="true" v-model:visible="visibleConfig">
      <ColConfig :unshowlist="unshowlist" :showlist="columns" @addOrRemoveCols="addOrRemoveCols" />
    </a-drawer>



    <a-modal :visible="addUserPageVisible" title="新建分组" 
      @ok="addUserPageSumbit" 
      @cancel="cancelAddUserPageModal" 
      :maskClosable="false">
      <template #footer>
        <a-button key="back" @click="cancelAddUserPageModal">取消</a-button>
        <a-button key="submit" type="primary" :loading="newPageLoading" @click="addUserPageSumbit">确定</a-button>
      </template>
      <div style="padding:1em">
        <div class="f-item">
          <span style="display: inline-block;padding: .5em 0;">分组名称：</span>
          <span><a-input type="text" v-model:value="newPageName" placeholder="请输入分组名称" @keyup.enter="addUserPageSumbit"></a-input></span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import STable from '@surely-vue/table';
import { useGlobSetting } from '/@/hooks/setting';
import { downloadByUrl } from '/@/utils/file/download';
import { message, Popconfirm, Drawer, Radio, Input, Select, Table,Avatar
  , RadioGroup, Button, Modal, Checkbox, Menu, MenuItem, Dropdown } from 'ant-design-vue';
export default {
    components: {
      AButton: Button,
      ADrawer: Drawer,
      ARadio: Radio,
      AInput: Input,
      ASelect: Select,
      ATable: Table,
      AAvatar: Avatar,
      Popconfirm: Popconfirm,
      ARadioGroup: RadioGroup,
      AModal: Modal,
      ACheckbox: Checkbox,
      AMenu: Menu,
      AMenuItem: MenuItem,
      ADropdown: Dropdown,
      STable: STable
    },
  };
</script>

<script lang="ts" setup>
import type { TableColumnsType } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import {FormOutlined } from '@ant-design/icons-vue';
  
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import chartView from '../chart/chart_view.vue';
import { StockOutlined, UserOutlined, PlusSquareOutlined, SettingOutlined, ReadOutlined, SearchOutlined,CheckOutlined,
  CloseOutlined, DeleteOutlined, EditOutlined, CaretDownOutlined, FolderOutlined, FileOutlined } from '@ant-design/icons-vue';
import ColConfig from '/@/views/selfstock/configcol.vue';
import { getTableColumns } from '/@/api/stock/selfstock';
import { getStocks,getStockAiRecommendStockList, getStock } from '/@/api/stock/stockDailyDao'
import { updateColumnSn } from '/@/api/stock/userColumnsDao';
import { findUserPageStockList, addUserPage, getUserPages, deleteUserStock, exportStocks, deleteUserPage, updateUserPageName } from '/@/api/stock/userStocksDao';
import RenderCandleItem from "../stock/components/RenderCandleItem.vue";
import RenderChartItem from "../stock/components/RenderChartItem.vue";
import zbFilter from '../zbfilter/index.vue'
import { getCurrentUserId } from '../../utils/currentUser.ts';
import { min } from 'lodash-es';
import html2canvas from 'html2canvas';

const zbFilterRef = ref();
const mytableref = ref(null);
const chartViewRef = ref();
const visibleDetail = ref(false);
const unshowlist = ref([]);
const data = ref([]);
const visibleConfig = ref(false);
const addUserPageVisible = ref(false);
const userPageList = ref([]);
const currentPageName = ref('');
const selectedRowKeys = ref([]);
const listLoading = ref(false);
const searchStockCode = ref('');
const currentStockData = ref({});
const selectedMainIndicator = ref(['stockWeighted252dRS']);
const selectedSubIndicator = ref(['VOL']);
const drawerVisbile = ref(true);
const newPageLoading = ref(false);

const rightStockInfoStyle = ref({
  "flex-direction":"column",
  "height":'100%',
  "overflow-y": "hidden"
})

const screenShot = ref();

function screenShotEvent(){
  html2canvas(screenShot.value).then((canvas)=>{
    const image = canvas.toDataURL('image/png');
    const downloadLink = document.createElement('a');
    downloadLink.href = image;
    downloadLink.download = 'screenshot.png';
    downloadLink.click();
  });
}

function getUserPageShowNum(){
  if(pageWidth.value<1380) {
    return 2;
  }
  return 3;
}

const settingItems = ref([
  {
    name: "蜡烛图类型", type: "select", options: [
      { label: "全实心", value: "candle_solid" },
      { label: "全空心", value: "candle_stroke" },
      { label: "涨空心", value: "candle_up_stroke" },
      { label: "跌空心", value: "candle_down_stroke" },
      { label: "OHLC", value: "ohlc" },
      { label: "面积图", value: "area" }
    ],
    key: "candle.type",
    defaultValue: "candle_solid",
    value: "candle_solid"
  },
  { name: "最新价显示", type: "switch", options: [], key: "candle.priceMark.last.show", defaultValue: true, value: true },
  { name: "最高价显示", type: "switch", options: [], key: "candle.priceMark.high.show", defaultValue: true, value: true },
  { name: "最低价显示", type: "switch", options: [], key: "candle.priceMark.low.show", defaultValue: true, value: true },
  {
    name: "指标最新值显示",
    type: "switch",
    options: [],
    key: "indicator.lastValueMark.show",
    defaultValue: false,
    value: false
  },
  {
    name: "价格轴类型", type: "select", options: [
      { label: "线性轴", value: "normal" },
      { label: "百分比轴", value: "percentage" },
      { label: "对数轴", value: "log" },
    ],
    key: "yAxis.type",
    defaultValue: "normal",
    value: "normal"
  },
  { name: "倒置坐标", type: "switch", options: [], key: "yAxis.reverse", defaultValue: false, value: false },
  { name: "网格线显示", type: "switch", options: [], key: "grid.show", defaultValue: true, value: true },
]);


const newPageName = ref('');
const pageHeight = ref(0);
const pageWidth = ref(0);

const scroll_x = ref(1000);
const scroll_y = ref(500);

function onSettingChange(data) {
  settingItems.value = data;
}

function onIndicatorChange(indicator: string, isDel?: boolean, isSub?: boolean) {
  if (isSub) {
    selectedSubIndicator.value = [...selectedSubIndicator.value.filter(item => item != indicator)];
    if (isDel) {

    } else {
      selectedSubIndicator.value.push(indicator)
    }
  } else {
    if (isDel) {
      selectedMainIndicator.value = [...selectedMainIndicator.value.filter(item => item != indicator)]
    } else {
      selectedMainIndicator.value.push(indicator)
    }
  }
}
const oldcolumns = ref([]);


const oldscroll_x = ref(0);

function hideStockPane() {
  columns.value = oldcolumns.value;
  visibleDetail.value = false;
  scroll_x.value = oldscroll_x.value;
  chartViewRef.value.disposeChart();
  drawerVisbile.value = false;
  resetScrollY();
}

function resetScrollY(){
  let dataHeight = data.value.length * 75;
  if(dataHeight>(pageHeight.value - 135)) {
    scroll_y.value = pageHeight.value - 135
    setTimeout(()=>{scroll_y.value = pageHeight.value - 135},200);
  } else {
    scroll_y.value = data.value.length * 75-1;
    setTimeout(()=>{
        scroll_y.value = data.value.length * 75;
    },400);
  }

}

async function viewAiStock(stockCode) {
  let stockData = await getStock({
    "stockCode": stockCode
  });
  opendetail(stockData);
}

async function opendetail(obj) {
  //判断是否已经显示详情界面
  if (!visibleDetail.value) {
    visibleDetail.value = true;
    oldcolumns.value = columns?.value;
    oldscroll_x.value = scroll_x.value;

    let stockNameCol = {...columns.value.find(item=>item.dataIndex=='stockName')};
    stockNameCol['width'] = 110;
    let closeCol = {...columns.value.find(item=>item.dataIndex=='close')};
    closeCol['width'] = 80;
    let riseAndFallCol = {...columns.value.find(item=>item.dataIndex=='riseAndFall')};
    riseAndFallCol['width']= 80;

    
    if(pageWidth.value>=1520){
      columns.value = [stockNameCol, closeCol, riseAndFallCol];
    } else {
      columns.value = [stockNameCol, riseAndFallCol];
    }

    scroll_x.value = (pageWidth.value - 130) / 4;
    drawerVisbile.value = true;
  }
  currentStockData.value = { ...obj };
  console.log('currentStockData:',currentStockData.value);
  selectedRowKeys.value = [obj.stockCode];
  getAiRecommendStockList();
  nextTick(() => {
    if (chartViewRef.value) {
      chartViewRef.value.switchStockKline(currentStockData.value);
      chartViewRef.value.changeRsStrongPaneWidth(drawerVisbile.value);
    }
  });
  resetScrollY();
}
function onPageClick(e,obj){
  
  //e 1:重命名， 2：删除
  
}

function switchTab(item) {
  currentPageName.value = item.pageName;
  selectedRowKeys.value = [];
  loadUserPageStockList();
}

function onSelectChange(keys) {
  console.log(keys);
  selectedRowKeys.value = keys;
}

onMounted(async () => {

  await initColumns();
  await loadUserPages();

  nextTick(()=> {
    pageHeight.value = window.innerHeight;
    pageWidth.value = window.innerWidth;
    scroll_x.value = pageWidth.value - 200;
    rightStockInfoStyle.value['max-height'] = (pageHeight.value - 125) + 'px';
  });
});

const columns = ref([]);

async function loadUserPages() {
  let userpages = await getUserPages({
    'userId': getCurrentUserId()
  });
  userPageList.value = userpages;
  currentPageName.value = userpages[0].pageName;
  await loadUserPageStockList();
}

function showAddUsePageModal() {
  addUserPageVisible.value = true;
}
function cancelAddUserPageModal() {
  addUserPageVisible.value = false;
}

const aiRecommendStockList = ref([]);

function getAiRecommendStockList() {
  getStockAiRecommendStockList({
    "stockCode": currentStockData.value.stockCode
  }).then(list => {
    if (list && list.length > 0) {
      aiRecommendStockList.value = list;
    }
  });
}

async function addUserPageSumbit() {
  newPageLoading.value = true;
  let res:any = await addUserPage({}, {
    "userId": getCurrentUserId(),
    "pageName": newPageName.value
  });

  if (res && res.length > 1) {
    message.error(res);
  } else {
    await loadUserPages();
    loadUserPageStockList();
    addUserPageVisible.value = false;
  }
  newPageName.value = '';
  newPageLoading.value = false;
}

function showcolconfig() {
  visibleConfig.value = true;
};



async function exportStocksClick(formatter) {
  if(selectedRowKeys.value.length==0) {
    message.error("请选择要导出的数据");
    return;
  }
    var extend = "."+formatter;
    const { ctxAdminPath } = useGlobSetting();
    downloadByUrl({
      url: ctxAdminPath + '/userstocks/exportStocks?stocks='+selectedRowKeys.value+'&format='+formatter,
      target: '_self',
      fileName:'自选股'+ extend
    });
}

function resetColumnWidth(columns) {
  let pw = window.innerWidth - 350;
  let colWidth = pw / (columns.length-1);
  if(colWidth<100) {
    colWidth = 100;
  }
  for (var i = 0; i < columns.length; i++) {
    let column = columns[i];
    if(column.dataIndex=='config') {
      continue;
    }
    if(column.dataIndex=='stockName') {
      column.width = 150;
    }else {
      column.width = colWidth;
    }
  }
}

async function initColumns() {
  let res = await getTableColumns({},{
    "userId": getCurrentUserId()
  });
  //设置不显示的列用于弹窗展示
  unshowlist.value = res.unshowlist;
  let mycolumns = res.showlist;
  resetColumnWidth(mycolumns);
  for (var i = 0; i < mycolumns.length; i++) {
    var column = mycolumns[i];
    if(column.dataIndex=='stockName') {
      column.fixed = 'left';
      column.sorter = 1;
      column.defaultSortOrder = 'descend'
    }
    column.sortDirections = ['descend', 'ascend'];
    column['align'] = 'center';
    columns.value.push(column);
    console.log(column)
  }

  let configColumn = {
    title: 'Action',
    key: 'config',
    align:'left',
    dataIndex:'config',
    ellipsis: true,
    fixed: 'right',
    type:1,
    width: window.innerWidth<1300 ? 56 : 48
  };

  columns.value.push(configColumn);
};


function isColumnExists(key) {
  return columns.value.some(a => a.key === key);
}

function removeColumn(key) {
  columns.value = columns.value.filter(col => col.key !== key);
}

function addOrRemoveCols(obj) {
  if (isColumnExists(obj.key)) {
    //移除
    removeColumn(obj.key);
    scroll_x.value = scroll_x.value - obj.width;
    resetColumnWidth(columns.value);
  } else {
    let tempCols = columns.value;
    let length = columns.value.length;
    let sn = obj.sn ? obj.sn : length - 1;
    tempCols.splice(sn, 0, obj);
    scroll_x.value = scroll_x.value + obj.width;
    columns.value = [...tempCols];
    resetColumnWidth(columns.value);
  }
}
const columnOrders = ref();
let orderKeyMap = {
  'descend': 'desc',
  'ascend': 'asc'
}
function stockTableChange(f, s, orders) {
  data.value = [];
  columnOrders.value = orders;
  loadUserPageStockList();
}

async function onSearch() {
  loadUserPageStockList()
}

/**
 * 查询股票
 */
async function loadUserPageStockList() {
  listLoading.value = true;
  let res = await findUserPageStockList({}, {
    'userId': getCurrentUserId(),
    'pageName': currentPageName.value,
    'stockCode': searchStockCode.value,
    'order': columnOrders.value?orderKeyMap[columnOrders.value.order]:'desc',
    'orderBy': columnOrders.value?.columnKey
  });
  data.value = res?res:[];
  resetScrollY();
  listLoading.value = false;
}

/**
 * 删除自选股
 */
function deleteStock2SelfPage() {
  deleteUserStock({}, {
    'pageName':currentPageName.value,
    'userId': getCurrentUserId(),
    'stockCodes': [...selectedRowKeys.value]
  }).then(()=>{
    message.success('删除成功');
    loadUserPageStockList().then(()=>{
      if(data.value&&data.value.length>0) {
        selectedRowKeys.value = [data.value[0].stockCode];
        chartViewRef.value.switchStockKline(data.value[0]);
      } else {
        hideStockPane();
      }
    });
  });
}

function openDrawer() {
  drawerVisbile.value = !drawerVisbile.value;
  nextTick(()=>{
    chartViewRef.value.scrollToCurrent();
    chartViewRef.value.changeRsStrongPaneWidth(drawerVisbile.value);
  });
}

async function deleteUserPageEvent(item) {
  await deleteUserPage({"ids":item.id});
  await loadUserPages();
  loadUserPageStockList();
  return true;
}

function resortUserPage(index) {
  let sliceIndex = getUserPageShowNum();
  let pages = userPageList.value;
  let targetPage = pages[sliceIndex+index];
  pages[sliceIndex+index] = pages[sliceIndex -1];
  pages[sliceIndex -1] = targetPage;
  selectedRowKeys.value = [];
  userPageList.value = pages;
  currentPageName.value = targetPage.pageName;
  loadUserPageStockList();
}

function getScorePaddingRIght(score){
  if(score<10) {
    return '5px'
  }
  if(score<100){
    return '5px'
  }
  return '5px'
}

function getScoreLineWidth(score) {
  
  let rem = 6;

  let fullWidth = 100;

  let rate = score / 100;

  let widthRate = fullWidth -(100 - rate*100)/2 ;

  return (Math.max(widthRate, 30)*rem / 100) + 'em';
}

/**
 * 计算市值
 */
function getSZ(sz){
  if(!sz){
    return '';
  }
  let ysz = sz/100000000;
  if(ysz>=10000){
    return (ysz/10000).toFixed(2)+'万亿';
  }
  return ysz.toFixed(2)+'亿';
}


//----------------指标配置------------------------

function showZbFilterModal() {
  zbFilterRef.value.showModal(currentPageName.value);
}

// -----用户字段存储
function saveUserColumns2Server() {
  let columCodes = [];
  for(var i=0; i<columns.value.length; i++) {
    columCodes.push(columns.value[i]['key']);
  }
  updateColumnSn({},{
    "userId": getCurrentUserId(),
    "columns": columCodes
  });
}

function columnDragEndEvent() {
  setTimeout(()=>{
    saveUserColumns2Server();
  }, 500)
}
</script>
<style lang="less" scoped>
.main-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
:deep(.ant-input) {
  background-color:#f1f1f1 !important;
}

.z-header {
  width: 100%;
  height: 48px;
  display: flex;
  padding: 0 .5em;
  margin: .5em 0;
}

.z-body {
  width: 100%;
  height: calc(100% - 48px);
  display: flex;
  margin-top: 12px;
}

.h-header {
  display: flex;
  padding: 0;
}

.h-header-btn {
  background-color: #f1f1f1;
  border: 1px solid #ececec;
  border-radius: 5px;
  padding: 8px 14px;
  color: #333333;
  /*margin-top: 8px;*/
  margin-left: 12px;

  & svg {
    fill: #333333;
  }
}

.h-header-btn.active,
.h-header-btn:hover {
  background-color: #E9EFFF;
  color: #025FFF;
  border: 1px solid #E9EFFF;

  & svg {
    fill: #025FFF;
  }
  
}

.right-set-btn {
  margin-left: 12px;
  padding: 8px 15px;
  border-radius: 5px;
  border: 1px solid #212123;
  color: #212123;

  & svg {
    fill: #212123
  }
 
}

.baned {
  background-color: #f1f1f1 !important;
  color: #999 !important;
  border: 1px solid #f1f1f1 !important;

  & svg {
    fill: #999 !important;
  }
}

.right-set-btn:active,
.right-set-btn:hover {
  background-color: #E9EFFF;
  color: #025FFF;
  border: 1px solid #E9EFFF;

  & svg {
    fill: #025FFF;
  }
   & .more-export-formatter{
    color: #025FFF;
  }
  & .export-label{
    color: #025FFF;
  }
}

.stock-tab {
  display: flex;
}

.rate-zb-block {
  min-width: 68px;
  text-align: center;
  padding: 2px;
  border-radius: 4px;
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  box-sizing: border-box;
}



.backBtn {
  padding: 2px 12px;
  border: 1px solid #212121;
  border-radius: 5px;
}

.backBtn:hover {
  padding: 2px 12px;
  border: 1px solid #025fff;
  color: #025fff;
}
.stockInfo .stock-info-bank {
  background-color: #ffffff;
  border-radius: .5em;
  padding: .5em;
  border: 1px solid #ddd;
}

.stock-info-bank-item {
  display: flex;
  padding: .2em .4em;
}

.stock-info-bank-item span {
  display: flex;
}

.stock-info-bank-label {
  color: #333;
}

.stock-info-bank-value {
  margin-left: auto;
}

.stock-info-ai-value {
  flex:1;
  text-align: center;
  align-content: center;
  margin: 0 auto;
}
.right_stock_info_ban {
  border: 1px solid #f1f1f1;
}
.searchStockCode{
  margin-left:12px; 
  border-radius: 5px;
  background:#f1f1f1;
  width: 15em;
}
.search-stock-code {
  width:15em;
}
.stock-base-info{
}

@media screen and (min-width: 1000px) {
  .recommend-pane{
    font-size: 11px;
  }
  .stock-list-btn{
    display: none;
  }

  .stock-base-info{
    display: none ;
  }
  .score{
  }
}

@media screen and (min-width: 1100px) {
  .recommend-pane{
    font-size: 11px;
  }
  .stock-list-btn{
    display: none;
  }

  .stock-base-info{
    display: none ;
  }
  .score{
  }
}

@media screen and (min-width: 1228px) {

  .recommend-pane{
    font-size: 12px;
  }

  .stock-list-btn{
    display: none;
  }

  .stock-base-info{
    display: none ;
  }
  .score{
  }
}

@media screen and (min-width: 1380px) {

  .recommend-pane{
    font-size: 13px;
  }

  .stock-list-btn{
    display: none;
  }

  .stock-base-info{
    display: none ;
  }
  .score{
  }
}

@media screen and (min-width: 1520px) {
  .recommend-pane{
    font-size: 14px;
  }

  .stock-base-info{
    display: block;
  }
  .score{
  }
}

@media screen and (min-width: 1680px) {
  .recommend-pane{
    font-size: 15px;
  }

  .stock-base-info{
    display: block;
  }
}

@media screen and (min-width: 1900px) {
  .recommend-pane{
    font-size: 15px;
  }

  .stock-base-info{
    display: block;
  }
}

@media screen and (min-width: 2000px) {
  .recommend-pane{
    font-size: 15px;
  }
  .dropdown-option {
    width: 15em;
  }

  .stock-base-info{
    display: block;
  }
}

@media screen and (min-width: 2200px) {
  .recommend-pane{
    font-size: 15px;
  }

  .dropdown-option {
    width: 15em;
  }
  .stock-base-info{
    display: block;
  }
}

.score{
  display: inline-block;
  height: 12px;
  border-radius: 5px;
  background: linear-gradient(270deg, #FF4B4B 0%, #FFBB54 100%);
  font-size: 11px;
  line-height: 12px;
  text-align: right;
  color: #ffffff;
  font-weight: 600;
}


:deep(.surely-table-body .surely-table-body-cell-range-selected:not(.surely-table-body .surely-table-body-cell-inline-edit) ){
    background: none !important;
}
:deep(.surely-table-body .surely-table-body-cell-range-selected.surely-table-body-cell-range-single-cell) {
    border: 0 !important;
}

:deep(.surely-table) {
  font-size: 15px;
  // Unlicensed Product   带有滚动条的table
  .surely-table-horizontal-scroll+div {
    visibility: hidden !important;
  }
 
  .surely-table-unselectable {
 
    // Powered by Surely Vue
    .surely-table-body-viewport-container+div {
      // 使用CSS的clip属性来隐藏元素。这样可以根据元素的尺寸和位置来裁剪显示区域，将其设为与元素相同大小的矩形，即可隐藏该元素。
      clip: rect(0, 0, 0, 0);
    }

  }
}

:deep(.surely-table-header-cell-title-inner) {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  font-family: sans-serif;
}

.hideWater{
  display: none !important;
}
.watermark {
  position: fixed;
  display: block;
  top: 100px;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 600px;
  padding-top: 100px;
  z-index: 9990;
  pointer-events: none;
  font-size: 120px;
  font-weight: 700;
  text-align: center;
  color: rgba(0, 0, 0, 0.06);
  transform-origin: center;
  background-image: url('/@/assets/icons/deecp-logo.svg');
  background-repeat: no-repeat;
  background-position: 50% 30%;
  background-size: 50% 50%;
  opacity: .35;
}
.more-export-formatter {
  color: #222;
}
.export-label{
  color: #222;
}
</style>